<!DOCTYPE html>


<head>
  <title>Radial Bar Chart</title>
  <script src="d3.js" charset="utf-8"></script>
  <style>
    svg {
            font-family: Arial, sans-serif;
            border: 1px solid lightgrey;
         }
    .svgchart2{
            position: absolute;
            top: calc(9%);
            left: calc(25%);
            width: calc(35%);
            height: calc(56%);
         }
  </style>
</head>

<body>
  <svg id="chart2" class="svgchart2">
    
  </svg>
  <script>
    const beforeDeal = [
      { date: '北京', value: 87.59 },
      { date: '天津', value: 85.11 },
      { date: '河北', value: 61.66 },
      { date: '辽宁', value: 73 },
      { date: '上海', value: 89.33 },
      { date: '江苏', value: 74.42 },
      { date: '浙江', value: 73.38 },
      { date: '福建', value: 70.13 },
      { date: '山东', value: 64.54 },
      { date: '广东', value: 74.78 },
      { date: '海南', value: 61.44 },
      { date: '山西', value: 63.95 },
      { date: '内蒙古', value: 68.6 },
      { date: '吉林', value: 63.71 },
      { date: '黑龙江', value: 66.21 },
      { date: '安徽', value: 60.16 },
      { date: '江西', value: 62.08 },
      { date: '河南', value: 57.06 },
      { date: '湖北', value: 64.66 },
      { date: '湖南', value: 60.31 },
      { date: '广西', value: 55.66 },
      { date: '重庆', value: 70.96 },
      { date: '四川', value: 58.35 },
      { date: '贵州', value: 54.82 },
      { date: '云南', value: 51.72 },
      { date: '西藏', value: 37.36 },
      { date: '陕西', value: 64 },
      { date: '甘肃', value: 54.21 },
      { date: '青海', value: 61.51 },
      { date: '宁夏', value: 66.35 },
      { date: '新疆', value: 57.9 },

    ]
    // 使用D3颜色插值为地区中的省份分配不同的颜色
    const eastColor = d3.scaleSequential(d3.interpolateBlues).domain([-1, 10]);
    const centralColor = d3.scaleSequential(d3.interpolateOranges).domain([-1, 10]);
    const westColor = d3.scaleSequential(d3.interpolateGreens).domain([-1, 10]);

    const provinces = {
      east: ["北京", "天津", "河北", "辽宁", "上海", "江苏", "浙江", "福建", "山东", "广东", "海南"],
      central: ["山西", "内蒙古", "吉林", "黑龙江", "安徽", "江西", "河南", "湖北", "湖南", "广西"],
      west: ["重庆", "四川", "贵州", "云南", "西藏", "陕西", "甘肃", "青海", "宁夏", "新疆"]
    };

    // 分配颜色值到数据中
    const data = beforeDeal.map(item => {
      if (provinces.east.includes(item.date)) {
        return { ...item, color: eastColor(provinces.east.indexOf(item.date)) };
      } else if (provinces.central.includes(item.date)) {
        return { ...item, color: centralColor(provinces.central.indexOf(item.date)) };
      } else if (provinces.west.includes(item.date)) {
        return { ...item, color: westColor(provinces.west.indexOf(item.date)) };
      } else {
        return { ...item, color: 'grey' }; // 如果省份不在列表中，默认为灰色
      }
    });

    console.log(data);

    // 图表的总体大小设置
    const width_c2 = 470, height_c2 = 380, innerRadius = 50, outerRadius = Math.min(width_c2, height_c2) / 2.2;

    // 创建SVG容器
    const svg_c2 = d3.select("#chart2")
      .attr("width", width_c2)
      .attr("height", height_c2)
      .append("g")
      .attr("transform", `translate(${width_c2 / 2},${height_c2 / 2})`);

    // 定义角度比例尺
    const x = d3.scaleBand()
      .range([0, 2 * Math.PI])
      .domain(data.map(d => d.date))
      .padding(0.01);

    // 定义径向比例尺
    const y = d3.scaleRadial()
      .range([innerRadius, outerRadius])
      .domain([0, d3.max(data, d => d.value)]);

    // 绘制条形
    svg_c2.append("g")
      .selectAll("path")
      .data(data)
      .join("path")
      .attr("fill", d => d.color)
      .attr("d", d3.arc()
        .innerRadius(innerRadius)
        .outerRadius(d => y(d['value']))
        .startAngle(d => x(d['date']))
        .endAngle(d => x(d['date']) + x.bandwidth())
        .padAngle(0.01)
        .padRadius(innerRadius));

    // 绘制径向轴
    const yAxis = g => g
      .attr("text-anchor", "middle")
      .call(g => g.selectAll("g")
        .data(y.ticks(10).slice(1))  // 修改此处以10为单位生成刻度
        .join("g")
        .attr("fill", "none")
        .call(g => g.append("circle")
          .attr("stroke", "#a6a6a6")
          .attr("stroke-opacity", 0.5)
          .attr("r", y))
        .call(g => g.append("text")
          .attr("y", d => -y(d))
          .attr("dy", "0.35em")
          .attr("stroke", "#fff")
          .attr("stroke-width", 5)
          .text(d => d.toString())
          .clone(true)
          .attr("fill", "#000")
          .attr("font-size", 9)
          .attr("stroke", "none")));
// 在条形图上添加省份名称
svg_c2.append("g")
   .selectAll("text")
   .data(data)
   .join("text")
   .attr("text-anchor", "start")
   .attr("x", d => Math.sin(x(d.date) + x.bandwidth() / 2) * (y(d.value) + 10)) // x位置
   .attr("y", d => -Math.cos(x(d.date) + x.bandwidth() / 2 ) * (y(d.value) + 10)) // y位置
   .text(d => d.date) // 设置文本内容
   .style("font-size", "11px")
   .attr("transform", d => `translate(0,0)`) // 旋转文本
   .attr("alignment-baseline", "middle");

    svg_c2.append("g")
      .call(yAxis);
  </script>
</body>

</html>